<template>
  <div class="heritage-card card-hover" @click="handleClick">
    <!-- 封面图片 -->
    <div class="card-image">
      <img :src="heritage.cover" :alt="heritage.name" class="image" />
      <div class="category-tag">{{ heritage.category }}</div>
    </div>

    <!-- 卡片内容 -->
    <div class="card-content">
      <h3 class="title">{{ heritage.name }}</h3>
      <div class="info">
        <span class="region">
          <i class="icon-location"></i>
          {{ heritage.region }}
        </span>
        <span class="level" v-if="heritage.level">
          <i class="icon-level"></i>
          {{ heritage.level }}
        </span>
      </div>
      <p class="description">{{ heritage.description || heritage.history }}</p>
    </div>

    <!-- 卡片底部 -->
    <div class="card-footer">
      <div class="tags">
        <span 
          v-for="(technique, index) in heritage.techniques" 
          :key="index"
          class="tag"
        >
          {{ technique }}
        </span>
      </div>
      <button class="view-btn" @click.stop="handleView">
        <i class="icon-view"></i>
        查看详情
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  heritage: {
    type: Object,
    required: true,
    validator: (value) => {
      return value && value.name && value.cover
    }
  }
})

const emit = defineEmits(['click', 'view'])

const handleClick = () => {
  emit('click', props.heritage)
}

const handleView = () => {
  emit('view', props.heritage)
}
</script>

<style scoped>
.heritage-card {
  @apply bg-white rounded-lg overflow-hidden shadow-md;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-image {
  @apply relative w-full;
  padding-top: 56.25%; /* 16:9 比例 */
}

.image {
  @apply absolute top-0 left-0 w-full h-full object-cover;
}

.category-tag {
  @apply absolute top-3 right-3 px-2 py-1 bg-blue-500 text-white text-sm rounded-full;
}

.card-content {
  @apply p-4 flex-grow;
}

.title {
  @apply text-xl font-bold text-gray-900 mb-2;
}

.info {
  @apply flex items-center gap-4 mb-3 text-sm text-gray-600;
}

.region,
.level {
  @apply flex items-center gap-1;
}

.description {
  @apply text-gray-600 text-sm line-clamp-3;
}

.card-footer {
  @apply p-4 border-t border-gray-100;
}

.tags {
  @apply flex flex-wrap gap-2 mb-3;
}

.tag {
  @apply px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full;
}

.view-btn {
  @apply w-full py-2 bg-blue-500 text-white rounded-md 
         flex items-center justify-center gap-2
         hover:bg-blue-600 transition-colors duration-200;
}

/* 图标样式 */
.icon-location,
.icon-level,
.icon-view {
  @apply w-4 h-4;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .card-content {
    @apply p-3;
  }

  .title {
    @apply text-lg;
  }

  .description {
    @apply line-clamp-2;
  }
}
</style>